<template>
  <div class="q-pa-md">
    <div class="q-gutter-md" style="max-width: 300px">
            <t-input v-model="text" label="focus事件"  labelPosition='top' borderType="borderless" @focus="handleFocus" />
            <t-input v-model="text" label="change事件"  labelPosition='top' borderType="borderless" @change="handleChange"/>
            <t-input v-model="text" label="blur事件"  labelPosition='top' borderType="borderless" @blur="handleBlur"/>
            <t-input v-model="text" label="click事件"  labelPosition='top' borderType="borderless" @click="handleClick"/>
            <t-input v-model="text" label="keydown事件"  labelPosition='top' borderType="borderless" @keydown="handleKeydown"/>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
       const  refInput = ref(null)
      return {
        refInput,
        text: ref(''),
        validate:ref(''),
                handleFocus(){
          alert('focus事件')
        },
            handleChange(){
          alert('change事件')
        },
            handleBlur(){
          alert('blur事件')
        },
            handleClick(){
          alert('click事件')
        },
            handleKeydown(){
          alert('keydown事件')
        },
      };
    },
  };
</script>
